<template>
    <div class="text">编辑个人信息</div>
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="store.state.userData[0].username" label="昵称" />
        </van-cell-group>
        <van-cell-group inset>
            <div class="box">
                <span>头像</span>
                <div>
                    <van-image round width="3.5rem" height="3.5rem" :src='store.state.userData[0].imgurl' alt="无" />
                </div>
                <div>
                    <van-uploader ref="loader" v-model="fileList" multiple :max-count="1" upload-text="点击更换"
                        :after-read="handleUploadOk" />
                </div>
            </div>
        </van-cell-group>
        <van-cell-group inset>
            <van-field v-model="store.state.userData[0].telephone" label="电话号码" :rules="[{
                required: true,
                message: '请填正确格式账号',
                pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            }]" />
        </van-cell-group>
        <van-cell-group inset>
            <van-field v-model="store.state.userData[0].password" label="密码" :rules="[{
                required: true,
                message: '密码必须由数字、字母两种字符组成，长度在8-15位之间',
                pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,15}$/
            }]" />
        </van-cell-group>
        <van-cell-group inset>
            <van-field v-model="store.state.userData[0].sex" label="性别" />
        </van-cell-group>
        <van-cell-group inset>
            <van-field v-model="store.state.userData[0].sign" label="个性签名" />
        </van-cell-group>
        <van-cell-group inset>
            <van-field v-model="d" label="注册时间" disabled />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>
    <van-button style="width:358px;margin: 0 auto;" round block type="primary" @click="fanhui">点击返回</van-button>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { put, getFileNameUUID } from '@/util/alioss'
import http from "@/util/api"
import { showToast } from 'vant'
import router from '@/router'

// 日期
const d = ref('')
const store = useStore()

const fileList = ref([
    { url: store.state.userData[0].imgurl, isImage: true }
])

onMounted(() => {
    d.value = store.state.userData[0].day[0].m + '月' + store.state.userData[0].day[1].d + '日'
})

// 点击返回
const fanhui = () => {
    router.push('/my')
}

const onSubmit = () => {
    let dd = [
        {
            "username": store.state.userData[0].username,
            "imgurl": store.state.userData[0].imgurl,
            "telephone": store.state.userData[0].telephone,
            "password": store.state.userData[0].password,
            "sex": store.state.userData[0].sex,
            "sign": store.state.userData[0].sign,
            "day": [
                {
                    "m": store.state.userData[0].day[0].m
                },
                {
                    "d": store.state.userData[0].day[1].d
                }
            ],
            "token": store.state.userData[0].token,
            "id": store.state.userData[0].id
        }
    ]
    http(`/userlist/${store.state.userData[0].id}`, 'put', dd[0]).then((res: any) => {
        // 返回200表示成功
        if (res.status === 200) {
            showToast({
                message: '修改成功',
                position: 'top',
            })
            store.commit('getUser', dd)
            router.push('/my')
        } else {
            showToast({
                message: '修改失败',
                position: 'top',
            })
        }
    })
}

const UploadOk = (file: any) => {
    handleUploadOk(file)
}
const handleUploadOk = async (option: any) => {
    //   console.log('点击上传要得到的内容', option);
    // 我们无论是使用什么ui框架 上传的流程当中只要能获取到 文件的file对象就可以完成自定义的上传
    // 生成的文件名称
    // 电竞平台.png => split => [电竞平台, png] => pop => png
    const objName = [getFileNameUUID(), option.file.name.split('.').pop()].join('.')

    // 调用 ali-oss 中的方法  put(文件名, 文件对象)
    const res = await put(`${objName}`, option.file)
    // imglist.value = await put(`${objName}`, option.file)
    store.state.userData[0].imgurl = res.url
    // imglist.value = res.url
    // console.log('上传的结果', res.url);
    // console.log('上传的结果', imglist.value.url);
    // 对于elemetui或者是plus 自定义上传成功之后需要正确的填充上传的结果到 fileList
    // 这里需要手动的通过 Promise.resolve来返回请求的结果 这个结果会自动的加载到

}
</script>

<style scoped lang="scss">
.text {
    height: 100px;
    color: aqua;
    text-align: center;
    line-height: 100px;
    margin: 50px 0;
}

.box {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    >span {
        font-size: 12px;
        margin-left: -3.666667vw;
    }
}
</style>